/* Authoring_tool.scss */
/* 主容器样式 - 包含整个工具页面的布局设置 */
.tool-box {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  padding-bottom: 40px; /* 底部留白 */
  max-width: 1700px; /* 最大宽度限制 */
}

/* 区域标题样式 - 每个工具分类的标题 */
.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 40px; /* 与上方内容的间距 */
  margin-bottom: 20px; /* 与下方工具项的间距 */
  color: #333; /* 文字颜色 */
  position: relative; /* 相对定位为装饰线做准备 */
  padding-left: 15px; /* 左侧内边距 */

  /* 标题左侧装饰线 - 蓝色竖线 */
  &::before {
    content: ''; /* 伪元素必需属性 */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    height: 70%; /* 装饰线高度 */
    width: 4px;
    background-color: #1890ff; /* 主题蓝色 */
    border-radius: 2px; /* 轻微圆角 */
  }
}

/* 工具容器基础样式 - 包含所有工具项的容器 */
.tool-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 15px; /* 工具项间距 */
  width: 100%; /* 全宽 */
  margin-top: 10px; /* 与标题的间距 */
}

/* 统一工具项样式 - 每个工具项的通用样式 */
.tool-item {
  display: flex;
  flex-direction: column;
  background-color: #fff; /* 白色背景 */
  padding: 12px 5px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  width: calc(16% - 15px); /* 6列布局，考虑gap */
  min-height: 60px; /* 最小高度 */
  border: 1px solid #e8e8e8; /* 浅灰色边框 */
  transition: all 0.3s ease; /* 过渡效果 */
  cursor: pointer; /* 手形指针 */
  position: relative; /* 相对定位 */
  overflow: visible; /* 允许内容溢出 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影 */

  /* 悬停效果 */
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影加深 */
    transform: translateY(-3px); /* 上浮效果 */
  }

  /* 图标和标题容器 */
  .tool-icon-and-title {
    display: flex;
    align-items: center; /* 垂直居中 */
    position: relative;
    z-index: 2; /* 堆叠顺序 */
    height: 100%; /* 全高 */
  }

  /* 工具图标样式 */
  .tool-icon {
    font-size: 22px; /* 图标大小 */
    margin-right: 1px; /* 与标题间距 */
    transition: all 0.3s ease; /* 过渡效果 */
    flex-shrink: 0; /* 防止压缩 */
  }

  /* 工具标题样式 */
  .tool-title {
    font-size: 15px;
    font-weight: 500; /* 中等粗细 */
    transition: all 0.3s ease;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏溢出 */
    text-overflow: ellipsis; /* 省略号 */
  }

  /* 悬停时显示的文字 */
  .hover-title {
    position: absolute;
    left: 50px; /* 初始位置 */
    opacity: 0; /* 初始透明 */
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
  }

  /* 图片预览容器 */
  .image-preview {
    position: absolute;
    top: -10px; /* 向上溢出 */
    right: -10px; /* 向右溢出 */
    width: 42%; /* 宽度比例 */
    height: 85%; /* 高度比例 */
    border-radius: 8px;
    overflow: hidden;
    z-index: 1; /* 在文字下层 */
    opacity: 0; /* 初始透明 */
    transform: translateX(20px) translateY(-20px); /* 初始偏移 */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 阴影效果 */

    /* 图片样式 */
    img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 保持比例填充 */
    }
  }

  /* 悬停状态下的变化 */
  &:hover {
    /* 图标动画 */
    .tool-icon {
      transform: translateX(-5px); /* 左移 */
      opacity: 0; /* 淡出 */
    }

    /* 标题动画 */
    .tool-title {
      transform: translateX(-30px); /* 左移 */
      opacity: 0; /* 淡出 */
    }

    /* 悬停文字动画 */
    .hover-title {
      left: 15px; /* 移动到左侧 */
      opacity: 1; /* 显示 */
    }

    /* 图片预览动画 */
    .image-preview {
      opacity: 1; /* 显示 */
      transform: translateX(0) translateY(0); /* 复位 */
    }
  }
}

/* 响应式设计 - 中等屏幕 (1200px及以下) */
@media (max-width: 1200px) {
  .tool-box {
    margin-left: 5%; /* 减少左侧留白 */
    padding-right: 5%; /* 添加右侧内边距 */
  }

  .tool-item {
    width: calc(33.333% - 15px); /* 3列布局 */
  }
}

/* 响应式设计 - 平板设备 (768px及以下) */
@media (max-width: 768px) {
  .tool-box {
    margin-left: 3%; /* 进一步减少左侧留白 */
  }

  .tool-item {
    width: calc(50% - 15px); /* 2列布局 */
    
    /* 调整图片预览样式 */
    .image-preview {
      width: 50%; /* 缩小宽度 */
      height: 100%; /* 恢复高度 */
      top: 0; /* 取消顶部溢出 */
      right: 0; /* 取消右侧溢出 */
    }
  }
}

/* 响应式设计 - 移动设备 (480px及以下) */
@media (max-width: 480px) {
  .tool-box {
    margin-left: 2%;
    padding-right: 2%;
  }

  .tool-item {
    width: 100%; /* 单列布局 */
    
    /* 调整图片预览 */
    .image-preview {
      width: 45%; /* 调整宽度 */
    }
  }

  /* 调整标题样式 */
  .section-title {
    font-size: 20px; /* 缩小字号 */
    margin-top: 30px; /* 调整上边距 */
  }
}